<template>
  <a-row class="card-nopd-out-container department-container">
    <a-col :span="3" class="tree-box process-chart">
      <makeListSide ref="makeListSideRef" @onSelect='onCardSelect' :listUrl="url.list" sideType="local" :isEnvLocal="true"/>
      <div class="px-10 pt-5">
        <a-button block type="primary" @click="syncData(syncDataAry,true)"> {{ $t('common.sync') }}</a-button>
      </div>
    </a-col>
    <a-col :span="21" class="table-box process-chart pt-20 pr-20">
      <div class='blue-line mb-20'>{{ $t('other.schRecord') }}</div>
      <a-table :columns="columns" size="small" :dataSource="autoRoadmapRecordVOList" :pagination="false" :scroll="{y: 'calc(100vh - 320px)'}">
        <template #bodyCell="{ column, text, record}">
          <template v-if="column.key === 'lineId'">
<!--            <span class="code-link" @click="viewDetail(record)">{{record.lineId}} </span>-->
<!--            <span>{{getFieldText(lineList,record.lineId,'id','lineNo')}} </span>-->
            <span>{{getFieldText(waterList,record.lineId,'id','lineNo')}} </span>
          </template>
          <template v-if="column.key === 'processName'">
            <a-button type="link" class="primary-link" @click="viewDetails('process',record)"> {{record.processName}}</a-button>
          </template>
          <template v-if="column.key === 'roadmapName'">
            <a-button type="link" class="primary-link" @click="viewDetails('roadmap',record)"> {{record.roadmapName}}</a-button>
          </template>
          <template v-else-if="column.key === 'status'">
            <a-tag :color="'default'" v-if="text === 0">{{$t('other.draft')}}</a-tag>
            <a-tag :color="'warning'" v-if="text === 1">{{$t('other.toSchedule')}}</a-tag>
            <a-tag :color="'processing'" v-if="text === 2">{{$t('other.scheduling')}}</a-tag>
            <a-tag :color="'success'" v-if="text === 3">{{$t('other.scheduled')}}</a-tag>
          </template>
          <template v-else-if="column.key === 'operate'">
            <span class="table-operate-container">
              <a-button type="link" class="primary-link" @click="handleOperate('look',record)">{{$t('common.look')}}</a-button>
              <a-divider type="vertical" />
              <a-button type="link" class="primary-link" @click="handleOperate('synchronization',record)">
                {{ $t('common.sync') }}<span v-if="record.syncNum">（{{record.syncNum}}）</span>
              </a-button>
            </span>
          </template>
        </template>
      </a-table>
    </a-col>
    <copyRouteModal ref="copyRouteModal" @ok="otherOperate" />

    <SyncDataModal ref="syncDataModalRef" />
  </a-row>
</template>

<script>
import { ListMixinPm } from '@/mixin/listMixinPm.js'
import { listInnerColumns } from './newModules/config'
import copyRouteModal from '@/views/makeManage/routeChart/newModules/copyRouteModal.vue'
import makeListSide from '@/views/makeManage/makeProcess/newModules/makeListSide.vue'
import {  getFieldText } from '@/utils'
import axios from '@/utils/request'
import { message } from 'ant-design-vue';
import { store } from '@/store'
// import getFieldText from '@/utils/index'

import SyncDataModal from '@/components/syncModal/syncDataModal.vue'
import {mapState} from "vuex";
export default {
  name: 'autoSchedule',
  mixins: [ListMixinPm],
  components: { copyRouteModal, makeListSide ,SyncDataModal},
  data () {
    return {
      url: {
        list: '/api/mo/auto-roadmap/page',
        delete: '/api/mo/auto-roadmap/delete',
        sync: '/api/system/iot/sync-cloud-data'
      },
      columns: listInnerColumns,
      autoRoadmapRecordVOList: [],
      selectMakeId: null,
      // lineList: [],
      syncDataAry: [
        {
          "lastSyncDateTime": (new Date()).getTime(),
          "syncIotCloudDataType": "ihs:production:autoRoadmap"
        },{"syncIotCloudDataType": "ihs:system:attachment"}
      ]
    }
  },
  computed:{
    ...mapState({
      waterList : state => state.normalData.waterList
    })
  },
  async created () {
    await store.dispatch('getWater')
    // let res = await axios.postAction('/api/device/hanger-line/list')
    // if (res.success){  this.lineList = res.data; }
  },
  methods: {
    getFieldText,
    loadData () { },
    viewDetail (record) {
      this.$router.push({
        path: '/makeManage/makeProcess/details',
        query: { id: record.moId, processId: record.id }
      })
    },
    async handleOperate (type, record) {
      // console.log(type, record)
      if (type ==='synchronization'){
        this.$refs.syncDataModalRef.visible = true
        try {
          let res = await axios.postAction('/api/mo/auto-roadmap/sync',{id:record.id})
          if (res.success){
            this.$refs.makeListSideRef.loadData(true)
            message.success(this.$t('other.synSuccess') )
            this.$refs.syncDataModalRef.visible = false
          }
        }catch{
          message.error(this.$t('other.synFail'))
          this.$refs.syncDataModalRef.visible = false
        }
      }else if(type ==='look'){
        this.$router.push({
          path:'/makeManage/editSchedule/details',
          query: { id: record.id  ,'type':'loc'}
        })
      }
    },
    viewDetails (type, record) {
      // console.log(type, record)
      if (type === 'process'){
        this.$router.push({
          path:'/makeManage/scheduleProcess/details',
          query: { id: record.id ,'type':'loc' }
        })
      }else if(type === 'roadmap'){
        this.$router.push({
          path:'/makeManage/scheduleRoute/details',
          query: { id: record.roadmapId  ,'type':'loc' }
        })
      }
    },
    otherOperate () {
      this.$refs.makeListSideRef.loadData(true)
    },

    scheduleDel (record) {
      if (record.status === 0) {
          this.handleDelete(record.id, true, this.$t('other.sureDel')+'?', this.$t('common.del'))
      } else {
        message.error(this.$t('other.delFail'))
      }
    },
    goBack (id) {
      this.goBackTitle('/api/mo/auto-roadmap/cancel',id,this.$t('other.sureReturnDraft'))
    },
    async goBackTitle(url,id,text) {
      this.confirmChangeStatus(url,{id }, text, this.$t('other.tips'), 'getAction')
    },
    handleCopy (id) {
      this.$refs.copyRouteModal.open(id)
    },
    onCardSelect (record) {
      this.autoRoadmapRecordVOList = record.autoRoadmapRecordVOList || []
      this.selectMakeId = record.id
    }
  },

}
</script>